<script setup>
import * as Cesium from "cesium";
import { onMounted } from 'vue';
onMounted(async ()=>{
  var esri = new Cesium.ArcGisMapServerImageryProvider({
    url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
  })
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZDJkNDQwNS02NjkwLTRiMjUtYjIxOC1jNjYwYjU0NWMzMDkiLCJpZCI6MjM3OTc0LCJpYXQiOjE3MjQ5ODY3MTN9.GTM0REWfAJ0a_fmRVCrZNHYvNzxWgAjtw5mFK_n6yDs"
  const viewer = new Cesium.Viewer('cesiumContainer',{
    baseLayerPicker:false,
    imageryLayers:esri,
    requestWaterMask: true
  });
  viewer.scene.setTerrain(
    new Cesium.Terrain(
      Cesium.CesiumTerrainProvider.fromIonAssetId(1),
    ),
  );
  const tileset = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(75343),
  );
  viewer.camera.setView({
    // destination:Cesium.Cartesian3.fromDegrees(121.49,31.23,3000),
    destination:new Cesium.Cartesian3(1333597.291762958,-4667718.246269587,4147626.344790953),
    orientation:{
      heading:0.8384333942956657,
      pitch:-1.299766516859664,
      roll:0.0
    }
  })
  tileset.style = new Cesium.Cesium3DTileStyle({
    color:{
      conditions:[
        ['${Height}>=300','rgba(45,240,255,0.5)'],
        ['${Height}>=200','rgba(102,71,151,0.8)'],
        ['${Height}>=100','rgba(170,162,204,0.8)'],
        ['${Height}>=50','rgba(224,226,238,0.8)'],
        ['${Height}>=25','rgba(252,230,200,0.8)'],
        ['${Height}>=10','rgba(248,176,87,0.8)'],
        ['${Height}>=5','rgba(198,106,11,0.8)'],
        ['true','rgba(127,59,8,0.9)']
      ],
      show:'S{Height}>=0'
    }
  })
  // const layer = viewer.imageryLayers.addImageryProvider(
  //   await Cesium.IonImageryProvider.fromAssetId(3812),
  // );
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style scoped>
#cesiumContainer{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
